<template>
	<view>
		<scroll-view scroll-y="true" style="height: 100vh;" @scroll="befoslio">
			<!-- 懒加载动画 -->
			<view class="loading-box">
				<u-loading :show="loadingone" color="#41ADBA" size="70"></u-loading>
			</view>
			<navbar name="测评报告"></navbar>
			<view v-show="result.healthLevel">
				<!-- 中医推广 -->

				<view>
					<view class="reportView">
						<view class="health">
							<view class="weui-flex">
								<view>
									<view class="placeholder">
										<view class="rateStyle" v-if="!result.healthLevel">
											<view class="scoreText noScore">
											</view>
										</view>
										<view class="rateStyle" v-else>
											<view class="scoreText">
												{{result.healthLevel}}
											</view>
											<view class="rateViews">
												<uni-rate :size="11" :value="result.starNum" :readonly="true" />
											</view>
										</view>
									</view>
								</view>
								<view class="weui-flex">
									<view class="placeholder">
										<view class="levelStyle">
											<view class="healthTitle">
												{{nameShare}}的健康综合指数
											</view>
											您的水平超过了{{result.numberSurpluses}}%的人
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="contentText">
							<!-- 您的综合健康状态较差，建议您及时就医，注意生活习惯，平衡膳食，合理运动，充足睡眠，远离烟酒，同时积极参加社交活动，保持心情舒畅。 -->
							{{result.healthLevelDesc}}
						</view>
					</view>
				</view>
				<view class="w706">
					<view class="ve-title">
						健康维度分析
					</view>
					<view style="height:  500rpx">
						<!-- <l-f2 ref="chart"></l-f2> -->
						<radar :datas="datas"></radar>
					</view>
				</view>
				<view class="w706">
					<view class="ve-title">
						风险因素
						<view class="element-flex">
							<view class="flex-within">
								内因
							</view>
							<view class="flex-outer">
								外因
							</view>
						</view>
					</view>
					<view class="factor-body">
						<view style="display: inline-block;">
							<block v-for="(items,idxs) in influenceFactor" :key="idxs">
								<view class="factor-item" :class="'bgcolor'+items.reasonType"
									@tap="navurl('/pages/subpackage/home/HealthReport/influence?riskId='+items.riskId,false)">
									{{items.riskName}}
								</view>
							</block>
						</view>
					</view>
				</view>
				<view class="w706">
					<view class="ve-title">
						健康风险预测
					</view>
					<view class="body-flex">
						<view class="body-flexl">
							<block v-for="(item,idx) in flexlList" :key="idx">
								<view class="risk-view" @tap="flexlTap('flexlList',idx)">
									{{item.title}}
									<!-- {{item.risk.length != 0}} -->
									<view v-if="item.risk.length == 0" class="risk-text">
										风险未知
									</view>
									<view v-else class="risk-image">
									</view>
									<view class="risk-risk" style="left: 0;" v-if="item.risk.length !=0&&item.riskbr">
										{{item.risk}}
									</view>
								</view>
							</block>
						</view>
						<view class="body-flexc">
						</view>
						<view class="body-flexr">
							<block v-for="(item,idx) in flexrList" :key="idx">
								<view class="risk-view" @tap="flexlTap('flexrList',idx)">
									{{item.title}}
									<view v-if="item.risk.length == 0" class="risk-text">
										风险未知
									</view>
									<view v-else class="risk-image">
									</view>
									<view class="risk-risk" style="right: 0;" v-if="item.risk.length !=0&&item.riskbr">
										{{item.risk}}
									</view>
								</view>
							</block>
						</view>
					</view>
					<block v-for="(item,idx) in gradeList" :key="idx">
						<view class="box-arrows">
							<view class="arrows-grade">
								<view :class="'arrows-dian'+idx"></view>{{item.title}}
							</view>
							<view class="illness">
								<view class="illness-item" v-for="(items,idxs) in item.arr" :key="idxs" @tap="navurl('/pages/subpackage/find/illness/illness?userAnsId='+userAnsId+'&diseaseId='+items.diseaseId
								,false)">
									{{items.diseaseName}}
								</view>
								<view v-show="item.arr.length ==0" style="text-align: center;color: #979797;">
									暂无风险
								</view>
							</view>
						</view>
						<u-line v-show="gradeList.length-1!= idx" />
					</block>
				</view>
				<!-- 中医报告 -->
				<view class="TCMReportBG"  v-if="nameShare == '您'&&false">
					<view class="TCMReportBG-titleView">
						<view class="TCMReportBG-text">
							{{resultZy.kindName?'中医测评您的体质：'+resultZy.kindName+'质':'中医测评您的体质：无'}}
						</view>
						<view class="TCMReportBG-btn" @tap="navZhongyi(resultZy)">
							{{resultZy.kindName?'点击查看':'去评估'}}
						</view>
					</view>
					<view class="TCMReportBG-center">
						{{resultZy.kindName?'总体特征：'+resultZy.cmcExplain+'':'您还没有去评估健康风险报告'}}
					</view>
				</view>
				<!-- end -->
				<view style="height: 70upx;">
				</view>
				<view class="fX">
					<view class="fX-l">
						<view class="fX-l-s">免费评估 专业解读</view>
						<view class="fX-l-x">邀请朋友测一测</view>
					</view>
					<button class="fX-r" open-type="share" @click="flag=1" >
						<image src="https://static.bsyjk.cn/bsy-customer/336B01C455154891A07A4FB087DAFA2F.png"></image>
						分享
					</button>
				</view>
				<view style="height: 300upx;">
				</view>
				<view class="pingcegs" v-if="nameShare == '您'">
					<button class="pingcegs-cp1"
						@tap="navurl('/pages/subpackage/home/oneAccess/evaluating?pageMy='+pageMy+'&topicId='+topicId+'&userAnsId='+userAnsId,false)"
						type="default">重新测评</button>
					<button class="pingcegs-tl1"
						@tap="navurl('/pages/subpackage/home/improve/improve?userAnsId='+userAnsId,false)"
						type="default">调理改善</button>
					<button class="pingcegs-cp2"
						@click="moreAssessments"
						type="default">更多评估</button>
				</view>
			</view>
			<!-- 没有数据情况 -->
			<view v-show="result == null" style="text-align: center;color: #9B9B9B;font-size: 30upx;">
				<view class="noDataicon">
				</view>
				暂无报告
				<view class="pingcegs">
					<!-- <button class="pingcegs-cp" @tap="navurl('/pages/subpackage/home/oneAccess/evaluating',false)"
					type="default">重新测评</button> -->
					<button class="pingcegs-tl" style="width:80%;margin: 30upx auto 0;"
						@tap="navurl('/pages/subpackage/home/oneAccess/evaluating',false)" type="default">去评估</button>
				</view>
			</view>
		</scroll-view>
		<view @tap="navurl('/pages/subpackage/home/major/major',false)" class="professionalEdition"
			:class="scrollEndTimer?'huadongzhongr':'fanhuileft'">
		</view>
	</view>
</template>

<script>
	import uLoading from "@/uview-ui/components/u-loading/u-loading.vue"
	import uLine from "@/uview-ui/components/u-line/u-line.vue"

	var timer;
	import radar from './radar'
	export default {
		components: {
			radar,
			uLine,
			uLoading
		},
		data() {
			return {
				flag:0,
				nameShare: '您',//昵称
				resultZy:{},//中医报告
				topicId: 3,
				evaluating: true, //是否评测过
				scrollEndTimer: false, //专业版
				pageMy: '', //是否来自我的页面
				influenceFactor: [], //风险因素
				userAnsId: '', //报告id
				datas: [],
				loadingone: false,
				result: {}, //后端返回数据
				gradeList: [],
				flexlList: [{
						title: '头部',
						risk: [],
						riskbr: false,
					},
					{
						title: '胸部',
						risk: [],
						riskbr: false,
					},
					{
						title: '四肢',
						risk: [],
						riskbr: false,
					},
					{
						title: '腹部',
						risk: [],
						riskbr: false,
					},
					{
						title: '生殖部',
						risk: [],
						riskbr: false,
					}
				],
				flexrList: [{
						title: '颈部',
						risk: [],
						riskbr: false,
					},
					{
						title: '皮肤',
						risk: [],
						riskbr: false,
					},
					{
						title: '腰部',
						risk: [],
						riskbr: false,
					},
					{
						title: '排泄部',
						risk: [],
						riskbr: false,
					},
					{
						title: '全身',
						risk: [],
						riskbr: false,
					}
				],
				factorList: [{
					text: '污染环境',
					cause: 'w'
				}, {
					text: '家族因素',
					cause: 'n'
				}, {
					text: '情绪不稳定',
					cause: 'w'
				}, {
					text: '年龄较大',
					cause: 'wz'
				}, {
					text: '肥胖',
					cause: 'w'
				}, {
					text: '肥胖',
					cause: 'w'
				}, {
					text: '过量饮酒',
					cause: 'n'
				}, {
					text: '压力过大',
					cause: 'w'
				}, {
					text: '饮食不节',
					cause: 'w'
				}, ],
				data: []
			}
		},
		onLoad(e) {
			if (e.topicId) {
				this.topicId = e.topicId
			}
			this.pageMy = e.pageMy ? e.pageMy : ''
			this.userAnsId = e.userAnsId //报告id
			// 分享
			wx.showShareMenu({
				withShareTicket: true,
				//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus: ["shareAppMessage", "shareTimeline"]
			})
			if (e.nickName) {
				this.nameShare = e.nickName
			}
			this.userAnswer(e.userAnsId)

			// this.zYgetLast(uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').phone,4)//获取中医报告
		},
		methods: {

			//更多评估
			moreAssessments(){
				this.$urouter.navigateTo({
					url: '/pagesHome/health-assessment/health-assessment',
					params: {
						// topicId: this.topicId,
					}
				});
			},
			// 中医
			navZhongyi(resultZy){
				if (resultZy.kindName) {
					uni.navigateTo({
						url: '/subpackage/TCM-Report/TCM-Report?userAnsId=' + uni.getStorageSync(
							'userAnsId')+'&topicId=4'
					})
				} else {//没测评去测评
					uni.navigateTo({
						url: '/subpackage/TCM-evaluation/TCM-evaluation?topicId=4'
					})
				}
			},
			//发送给朋友
			onShareAppMessage(res) {
				if(this.flag==1){
					return {
						title: '2+1健康风险评估',
						type: 0,
						path: 'pages/subpackage/home/oneAccess/evaluating',
						summary: "",
						imageUrl: "https://static.bsyjk.cn/bsy-customer/89E202ACF39F43A19951091F6ABF98B0.jpeg"
					}
				}else{
					// 此处的distSource为分享者的部分信息，需要传递给其他人
					// let distSource = uni.getStorageSync('distSource');
					let USER_DATA_BSY_Z = uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z')
					return {
						title: this.shareTitle,
						type: 0,
						path: '/pages/tab/home?userAnsId=' + this.userAnsId + '&type=6&nickName=' + USER_DATA_BSY_Z.nickName +
							'&avatarUrl=' + USER_DATA_BSY_Z.avatarUrl+'&phone='+uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').phone,
						summary: "",
						// imageUrl: "https://58d.oss-cn-hangzhou.aliyuncs.com/goods/ttg_1596073788000.png"
					}
				}
			},
			// 获取最近一次中医报告
			zYgetLast(phone, topicId) { //首页添加健康豆
				let _this = this;
				this.$api.get(global.apiUrls.zYgetLast + '/' + phone + '/' + topicId, {})
					.then(res => {
						if (res.data.code == 1000) {
							let result = res.data.result;
							_this.resultZy = result
						}
					}).catch(err => {})
			},
			befoslio(e) {
				let _this = this
				// 只要滚动就清除状态
				clearTimeout(timer)
				// 告知标识 -> 开始滚动
				this.scrollEndTimer = true
				timer = setTimeout(() => {
					// 告知标识 -> 结束滚动
					if (this.scrollEndTimer) {
						this.scrollEndTimer = false;
					}
				}, 500);
			},
			mChart() {
				this.$refs.chart.init(config => {
					const chart = new F2.Chart(config);
					chart.source(this.data, {
						value: {
							min: 0,
						}
					});
					chart.coord('polar');
					chart.axis('value', {
						label: null,
						grid: function grid(text, index, total) {
							if (index === total - 1) {
								return {
									stroke: 'rgb(113, 113, 112)',
									strokeOpacity: 1,
									lineDash: null
								};
							}

							return {
								lineDash: null,
								stroke: 'rgb(220, 220, 220)',
								strokeOpacity: 0.4
							};
						}
					});
					chart.axis('time', {
						label: {
							fontSize: 12
						},
						grid: {
							stroke: 'rgb(113, 113, 112)',
							strokeOpacity: 0.4,
							lineDash: null
						}
					});
					chart.legend({
						align: 'center',
						itemWidth: 100
					});
					chart.tooltip({
						custom: true, // 自定义 tooltip 内容框
						onChange: function onChange(obj) {
							const legend = chart.get('legendController').legends.top[0];
							const tooltipItems = obj.items;
							const legendItems = legend.items;
							const map = {};
							legendItems.forEach(function(item) {
								map[item.name] = _.clone(item);
							});
							tooltipItems.forEach(function(item) {
								const name = item.name;
								const value = item.value;
								if (map[name]) {
									map[name].value = value;
								}
							});
							legend.setItems(_.values(map));
						},
						onHide: function onHide() {
							const legend = chart.get('legendController').legends.top[0];
							legend.setItems(chart.getLegendItems().country);
						}
					});
					chart.area()
						.position('time*value')
						// .color('year')
						.style({
							fillOpacity: 0.4
						});
					chart.render();
					return chart;
				});
			},
			userAnswer(userAnsId) {
				// uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId
				this.loadingone = true;
				let _this = this;
				let userId = uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId,
					starNum, //星判断
					dataArr = [], //雷达图
					gradeList = [], //风险
					flexlList = this.flexlList,
					flexrList = this.flexrList;
					let url = global.apiUrls.userAnswer + '/' + userId + '/' + 3;
					if(userAnsId){
					  url = global.apiUrls.userAnswer + '/'+userAnsId;
					}
				// this.userAnsId
				this.$api.get(url, {}).then(res => {
					if (res.data.code == 1000) {
						let result = res.data.result;
						if (result == null) {
							_this.result = result;
						} else {
							result.goodArticles = JSON.parse(result.goodArticles)
							result.goodFoods = JSON.parse(result.goodFoods)
							result.goodSport = JSON.parse(result.goodSport)
							let kindScore = JSON.parse(result.kindScore)
							for (let i = 0; i < kindScore.length; i++) {
								if (!kindScore[i].lastScore) {
									kindScore[i].lastScore = 0
								}
								kindScore[i].lastScore = parseInt(kindScore[i].lastScore); //pingfne
								if (kindScore[i].lastScore > 100) { //最大值100
									kindScore[i].lastScore = 100
								}
							}
							console.log(kindScore)
							_this.datas = kindScore;
							result.riskDisease = JSON.parse(result.riskDisease);
							let riskLists = [];
							for (let i = 0; i < result.riskDisease.length; i++) {
								console.log(result.riskDisease, 375)
								if (result.riskDisease[i].riskList) {
									riskLists = riskLists.concat(result.riskDisease[i].riskList);
								}
							}
							var resultArr = [];
							var obj = {};
							for (let i = 0; i < riskLists.length; i++) {
								if (!obj[riskLists[i].riskId]) {
									resultArr.push(riskLists[i]);
									obj[riskLists[i].riskId] = true;
								}
							}
							_this.influenceFactor = result.userRiskList //风险因素
							console.log(resultArr, result.riskDisease, 373)
							if (result.healthLevel == 'A') {
								starNum = 5
							} else if (result.healthLevel == "B") {
								starNum = 4
							} else if (result.healthLevel == "C") {
								starNum = 3
							} else if (result.healthLevel == "D") {
								starNum = 2
							} else if (result.healthLevel == "E") {
								starNum = 1
							}
							result.starNum = starNum
							console.log(result)
							_this.result = result;
							_this.userAnsId = result.userAnsId
							// for(let i = 0;i<result.kindScore.length;i++){
							// 	// result.kindScore[i].
							// 	if(result.kindScore[i].kindName == "认知与日常活动能力"){
							// 		result.kindScore[i].kindName ="认知与日"
							// 	}else if(result.kindScore[i].kindName == "健康生活方式"){
							// 		result.kindScore[i].kindName ="健康生活"
							// 	}else if(result.kindScore[i].kindName == "心理与社会支持"){
							// 		result.kindScore[i].kindName ="心理与社"
							// 	}
							// 	dataArr.push({
							// 		time: result.kindScore[i].kindName,
							// 		value: result.kindScore[i].lastScore,
							// 		year: '2015'
							// 	})
							// }
							let typeArr1 = [], //风险状态 低风险
								typeArr2 = [], //一般
								typeArr3 = [], //较高
								typeArr4 = []; //高
							for (let i = 0; i < result.riskDisease.length; i++) {
								// 风险判断
								if (result.riskDisease[i].riskWeight < 30) { //低
									typeArr1.push(result.riskDisease[i])
								} else if (result.riskDisease[i].riskWeight < 50) {
									typeArr2.push(result.riskDisease[i])
								} else if (result.riskDisease[i].riskWeight < 60) {
									typeArr3.push(result.riskDisease[i])
								} else {
									typeArr4.push(result.riskDisease[i])
								}
								// 部位判断
								if (result.riskDisease[i].positionName == '头部') {
									flexlList[0].risk.push(result.riskDisease[i].diseaseName)
								} else if (result.riskDisease[i].positionName == '胸部') {
									flexlList[1].risk.push(result.riskDisease[i].diseaseName)
								} else if (result.riskDisease[i].positionName == '四肢') {
									flexlList[2].risk.push(result.riskDisease[i].diseaseName)
								} else if (result.riskDisease[i].positionName == '腹部') {
									flexlList[3].risk.push(result.riskDisease[i].diseaseName)
								} else if (result.riskDisease[i].positionName == '生殖部') {
									flexlList[4].risk.push(result.riskDisease[i].diseaseName)
								} else if (result.riskDisease[i].positionName == '颈部') {
									flexrList[0].risk.push(result.riskDisease[i].diseaseName)
								} else if (result.riskDisease[i].positionName == '皮肤') {
									flexrList[1].risk.push(result.riskDisease[i].diseaseName)
								} else if (result.riskDisease[i].positionName == '腰部') {
									flexrList[2].risk.push(result.riskDisease[i].diseaseName)
								} else if (result.riskDisease[i].positionName == '排泄部') {
									flexrList[3].risk.push(result.riskDisease[i].diseaseName)
								} else if (result.riskDisease[i].positionName == '全身') {
									flexrList[4].risk.push(result.riskDisease[i].diseaseName)
								}
							}
							gradeList = [{
									title: '风险极高',
									arr: typeArr4
								},
								{
									title: '风险较高',
									arr: typeArr3
								},
								{
									title: '风险一般',
									arr: typeArr2
								},
								{
									title: '风险较低',
									arr: typeArr1
								}
							]

							console.log(flexlList, flexrList)
							_this.flexlList = flexlList;
							_this.flexrList = flexrList;
							_this.gradeList = gradeList
							_this.data = dataArr
							_this.mChart()
						}

					} else {
						uni.showToast({
							title: res.data.message,
							icon: "none",
							duration: 2000
						});
					}
					_this.loadingone = false;
				}).catch(err => {
					_this.loadingone = false;
				})
			},
			navurl(url, data) {
				console.log(url, data, 4500000)
				// return
				if (data == false) {
					this.$urouter.navigateTo({
						url: url,
						params: {}
					});
				} else {
					this.$urouter.navigateTo({
						url: url,
						params: {
							goodFoods: JSON.stringify(data.goodFoods),
							goodSport: JSON.stringify(data.goodSport),
							improvePlanInfo: JSON.stringify(data.improvePlanInfo),
							goodVideos: JSON.stringify(data.goodVideos)
						}
					});
				}
			},
			flexlTap(name, idx) {
				if (name == 'flexlList') {
					let list = this.flexlList;
					list[idx].riskbr = !list[idx].riskbr;
					this.flexlList = list
				} else {
					let list = this.flexrList;
					list[idx].riskbr = !list[idx].riskbr;
					this.flexrList = list
				}

			}
		}
	}
</script>

<style lang="scss">
	.professionalEdition {
		width: 270upx;
		height: 145upx;
		position: fixed;
		right: 0;
		bottom: 350upx;
		background: url(http://static.bsyjk.cn/capsule/D34495754F8D4397866F66EA125DE33B.png)no-repeat;
		background-size: 100% 100%;
		z-index: 10;
	}

	.fanhuileft {
		right: 0;
		-webkit-animation-name: right0;
		/*动画名称*/
		-webkit-animation-duration: .3s;
		/*动画持续时间*/
		-webkit-animation-iteration-count: 1;
		/*动画次数*/
		-webkit-animation-delay: 0s;
	}

	@keyframes right0 {
		0% {
			right: -220rpx;
		}

		50% {
			right: -110rpx;
		}

		100% {
			right: 0;
		}
	}

	.huadongzhongr {
		right: -220rpx;
		-webkit-animation-name: right110;
		/*动画名称*/
		-webkit-animation-duration: .3s;
		/*动画持续时间*/
		-webkit-animation-iteration-count: 1;
		/*动画次数*/
		-webkit-animation-delay: 0s;
		/*延迟时间*/
	}

	@keyframes right110 {
		0% {
			right: 0;
		}

		50% {
			right: -110rpx;
		}

		100% {
			right: -220rpx;
		}
	}

	.w706 {
		width: 706upx;
		background: #fff;
		margin: 30upx auto 0;
		padding: 20upx;
		border-radius: 25upx;
	}

	.noDataicon {
		width: 166upx;
		height: 209upx;
		background: url(http://static.bsyjk.cn/report/506F44BBDD9C40C8867A2F4978E420D0.png)no-repeat;
		background-size: 166upx 209upx;
		margin: 400upx auto 30upx;
	}

	.ve-title {
		height: 100upx;
		line-height: 80upx;
		font-size: 36upx;
		font-weight: bold;
		color: #333333;
		padding-left: 40upx;
		position: relative;

		.element-flex {
			display: flex;
			float: right;
			width: 200upx;
			height: 80upx;
			// background-color: pink;
			font-size: 24upx;
			font-weight: 500;

			.flex-within,
			.flex-outer {
				position: relative;
				padding-left: 34upx;
			}

			.flex-within::before,
			.flex-outer::before {
				content: '';
				position: absolute;
				left: 10upx;
				top: 34upx;
				width: 14upx;
				height: 14upx;
				background-color: pink;
				border-radius: 50%;
			}

			.flex-outer::before {
				background-color: #2EA7E0;
			}
		}
	}

	.ve-title::before {
		content: '';
		position: absolute;
		top: 24upx;
		left: 4upx;
		width: 10upx;
		height: 36upx;
		background: #2EA7E0;
		border-radius: 5upx;
	}

	.reportView {
		width: 700upx;
		background: #FFFFFF;
		box-shadow: 0px 2upx 20upx 0upx rgba(173, 173, 173, 0.25);
		border-radius: 40upx;
		margin: 32upx auto 0;

		.contentText {
			width: 637upx;
			font-size: 36upx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 53upx;
			margin: 30upx auto 0;
			padding-bottom: 30upx;
		}

		button {
			width: 244upx;
			height: 75upx;
			background: #2EA7E0;
			border-radius: 42upx;
			color: #fff;
			font-size: 36upx;
			font-weight: 500;
			line-height: 75upx;
			font-family: PingFangSC-Medium, PingFang SC;
			margin: 10upx 12upx 0 0;
		}
	}

	.health {
		width: 700upx;
		height: 175upx;
		background: url(http://static.bsyjk.cn/topbg/D41800DF6F434DE7B1D1FFCB21CF3EF3.png) no-repeat;
		background-size: 700upx 175upx;
		margin-bottom: 30upx;

		.rateViews {
			padding-left: 10upx;
			transform: scale(0.7);
		}

		.rateStyle {
			width: 144upx;
			height: 144upx;
			margin: 19upx 23upx 0 18upx;
			background: url(http://static.bsyjk.cn/Group2x/EB5AB2CBF6F44A9B8C153366402D2CAA.png) no-repeat;
			background-size: 144upx 144upx;
		}

		.levelStyle {
			margin: 50upx 0 0;
			color: #81C042;
			font-size: 24upx;

			.healthTitle {
				font-weight: 500;
				font-size: 36upx;
				line-height: 50upx;
			}
		}

		.scoreText {
			width: 50upx;
			font-size: 60upx;
			font-family: Swiss721BT-Black, Swiss721BT;
			font-weight: 900;
			color: #F5A623;
			line-height: 72upx;
			letter-spacing: 3upx;
			margin: 0 auto;
			padding-top: 19upx;
		}
	}

	.noScore {
		position: relative;
	}

	.noScore::before {
		content: '';
		width: 33upx;
		height: 6upx;
		position: absolute;
		top: 70upx;
		left: -20upx;
		border-radius: 20upx;
		background: #F5A623;
	}

	.noScore::after {
		content: '';
		width: 33upx;
		height: 6upx;
		position: absolute;
		top: 70upx;
		left: 32upx;
		border-radius: 20upx;
		background: #F5A623;
	}

	.factor-body {
		width: 670upx;
		margin: 0 auto 30upx;

		.factor-item {
			display: inline-block;
			height: 44upx;
			line-height: 44upx;
			background: #2EA7E0;
			color: #fff;
			font-size: 24upx;
			font-weight: 400;
			padding: 0 10upx;
			margin: 25upx 0 0 30upx;
			border-radius: 6upx;
		}

		.bgcolor1 {
			background-color: pink;
		}
	}

	.body-flex {
		display: flex;

		.body-flexl {
			width: 200upx;
			height: 580upx;
			text-align: center;

			.risk-view {
				width: 160upx;
				height: 91upx;
				margin: 0 auto 30upx;
				padding: 10upx 0 0;
				background: #EFEDED;
				border-radius: 10upx;
				font-size: 28upx;
				font-weight: 400;
				color: #000000;
				line-height: 40upx;
				position: relative;

				.risk-risk {
					width: 250upx;
					display: inline-block;
					background: #FFFFFF;
					box-shadow: 0px 7px 20px 0px rgba(0, 0, 0, 0.08);
					border-radius: 10px;
					padding: 23upx 10upx;
					position: absolute;
					z-index: 1;
					font-size: 24upx;
				}

				.risk-text {
					font-size: 24upx;
					font-weight: 400;
					color: #9B9B9B;
					line-height: 33upx;
				}

				.risk-image {
					width: 39upx;
					height: 33upx;
					margin: 0 auto;
					background: url(http://static.bsyjk.cn/warning2x/1978F244A8B544A2B0BB516A012939A6.png)no-repeat;
					background-size: 39upx 33upx;
				}
			}
		}

		.body-flexc {
			width: 303upx;
			height: 580upx;
			background: url(http://static.bsyjk.cn/bodyImage/F3671F7AE06B4EBAB4902A0D5A171347.png)no-repeat;
			background-size: 303upx 580upx;
		}

		.body-flexr {
			width: 200upx;
			height: 580upx;
			text-align: center;

			.risk-view {
				width: 160upx;
				height: 91upx;
				margin: 0 auto 30upx;
				padding: 10upx 0 0;
				background: #EFEDED;
				border-radius: 10upx;
				font-size: 28upx;
				font-weight: 400;
				color: #000000;
				line-height: 40upx;
				position: relative;

				.risk-risk {
					width: 250upx;
					display: inline-block;
					background: #FFFFFF;
					box-shadow: 0px 7px 20px 0px rgba(0, 0, 0, 0.08);
					border-radius: 10px;
					padding: 23upx 10upx;
					position: absolute;
					z-index: 1;
					font-size: 24upx;
				}

				.risk-text {
					font-size: 24upx;
					font-weight: 400;
					color: #9B9B9B;
					line-height: 33upx;
				}

				.risk-image {
					width: 39upx;
					height: 33upx;
					margin: 0 auto;
					background: url(http://static.bsyjk.cn/warning2x/1978F244A8B544A2B0BB516A012939A6.png)no-repeat;
					background-size: 39upx 33upx;
				}
			}
		}
	}

	.box-arrows {
		width: 640upx;
		min-height: 139upx;
		margin: 0 auto;
		padding: 24upx 0 0;
		position: relative;

		.illness {
			padding: 14upx 0 0;

			.illness-item {
				min-width: 133upx;
				height: 40upx;
				display: inline-block;
				border-radius: 14upx;
				border: 1upx solid #979797;
				text-align: center;
				color: #979797;
				line-height: 40upx;
				margin: 0 0 10upx 20upx;
				padding: 0 14upx;
			}
		}

		.arrows-grade {
			font-size: 30upx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 42upx;

			.arrows-dian0,
			.arrows-dian1,
			.arrows-dian2,
			.arrows-dian3,
			.arrows-dian4 {
				width: 20upx;
				height: 20upx;
				background-color: #F56767;
				float: left;
				border-radius: 50%;
				margin: 10upx 10upx 0 0;
			}

			.arrows-dian1 {
				background: #F5A623;
			}

			.arrows-dian2 {
				background: #F8E71C;
			}

			.arrows-dian3 {
				background: #2EA7E0;
			}
		}
	}

	.box-arrows:before {
		content: '';
		position: absolute;
		right: 0upx;
		top: 50%;
		transform: translateY(-50%);
		width: 36upx;
		height: 36upx;
		background: url(https://bsyjk-pic.bsyjk.cn/arrows/1CB6DDEEB08E4CE0A40E8E86A99D1A0D.png)no-repeat;
		background-size: 36upx 36upx;
	}
	.fX{
		width: 706upx;
		height: 144upx;
		background: url(https://static.bsyjk.cn/bsy-customer/CE74EB8AB864481B8FB0C5D37B0BE546.png) no-repeat;
		background-size: 100% 100%;
		margin: 30upx 22upx 0 22upx;
		display: flex;
		justify-content: space-between;
		position: fixed;
		bottom: 210upx;
		.fX-l{
			margin-left: 38upx;
			margin-top: 30upx;
			.fX-l-s{
				color: #2EA7E0;
				font-size: 36upx;
			}
			.fX-l-x{
				color: #F5A623;
				font-size: 26upx;
				line-height: 35upx;
				margin-top: 8upx;
			}

		}
		.fX-r{
			margin-right: 27upx;
			margin-top: 30upx;
			width: 152upx;
			height: 54upx;
			background:  #F5A623;
			border-radius: 45upx;//https://static.bsyjk.cn/bsy-customer/336B01C455154891A07A4FB087DAFA2F.png
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 30upx;
			image{
				width: 32upx;
				height: 30upx;
			}
		}
	}

	.pingcegs {
		width: 750upx;
		height: 197upx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		display: flex;

		.pingcegs-cp,
		.pingcegs-tl {
			width: 326upx;
			height: 80upx;
			border-radius: 40upx;
			border: 1upx solid #2EA7E0;
			font-size: 24upx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #2EA7E0;
			line-height: 80upx;
			background-color: #fff;
			margin: 33upx;
		}

		.pingcegs-tl {
			background: #2EA7E0;
			color: #fff;
		}
		.pingcegs-tl1 {
			width: 326upx;
			height: 80upx;
			border-radius: 40upx;
			// border: 1upx solid #2EA7E0;
			font-size: 24upx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #fff;
			line-height: 80upx;
			background-color: #fff;
			margin: 33upx;
			background: #81C042;
		}
		.pingcegs-cp1 {
			width: 326upx;
			height: 80upx;
			border-radius: 40upx;
			border: 1upx solid #2EA7E0;
			font-size: 24upx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #fff;
			line-height: 80upx;
			background-color: #fff;
			margin: 33upx;
			// background: #81C042;
			color: #2EA7E0;
		}
		.pingcegs-cp2 {
			width: 326upx;
			height: 80upx;
			border-radius: 40upx;
			// border: 1upx solid #2EA7E0;
			font-size: 24upx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #fff;
			line-height: 80upx;
			background-color: #fff;
			margin: 33upx;
			background: linear-gradient(112deg, #51B29E 0%, #2EA7E0 100%);
		}
	}

	.TCMReportBG {
		width: 708upx;
		height: 175upx;
		margin: 30upx auto 0;
		background: url(http://static.bsyjk.cn/TCMReportBG/5DE0F4B2DF4340959B88FF7A8C8B706C.png)no-repeat;
		background-size: 708upx 175upx;

		.TCMReportBG-titleView {
			display: flex;
			padding: 22upx 20upx 6upx 30upx;
			color: #2EA7E0;

			.TCMReportBG-text {
				width: 560upx;
				font-size: 30upx;
			}

			.TCMReportBG-btn {
				width: 125upx;
				height: 40upx;
				line-height: 40upx;
				text-align: center;
				color: #fff;
				background: #81C042;
				border-radius: 42upx;
				font-size: 24upx;
			}
		}

		.TCMReportBG-center {
			padding: 0 30upx;
			font-size: 26upx;
			color: #2EA7E0;
		}
	}
</style>
